<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
	<script  src="./jquery.js"></script>
	<script type="text/javascript">
	//http://127.0.0.1/springboot-netty/user/login?username=zhz001&password=123456
	    window.token = "";
	    window.socket = null;
	    		var reconn = false;
	    		if (!window.WebSocket) {
	    			window.WebSocket = window.MozWebSocket;
	    		}
	    		
	            if (window.WebSocket) {

	    			var heartbeatTimeout = 60000
	    			var reconnInterval = 1000
	    			var lastInteractionTimeValue = 0
	    			var lastInteractionTime = function () {
	    				if (arguments.length == 1) {
	    					lastInteractionTimeValue = arguments[0]
	    				}
	    				return lastInteractionTimeValue
	    			}
	    			var heartbeatSendInterval = heartbeatTimeout / 2

	    			var count = 0;
	    			var connect = function (token) {
	    				window.socket = new WebSocket("ws://localhost:10000/ws?token="+token);
	    				window.socket.onmessage = function (event) {
	    					var ta = document.getElementById('responseText');
	    					ta.value = ta.value + '\n' + event.data
	    					lastInteractionTime(new Date().getTime())
	    				};
	    				window.socket.onopen = function (event) {
	    					var ta = document.getElementById('responseText');
	    					ta.value = "服务器连接成功!";
	    					lastInteractionTime(new Date().getTime())
	    					window.pingIntervalId = setInterval(function () {
	    							ping(self)
	    						}, heartbeatSendInterval)
	    					count = 0;
	    				};
	    				window.socket.onclose = function (event) {
	    					clearInterval(window.pingIntervalId)
	    					var ta = document.getElementById('responseText');
	    					ta.value = "服务器异常,尝试重连连接,{重连次数:"+count+"}";
	    					reconn()
	    				};
	    			}

	    			var reconn = function (event) {
	    				count++
	    				setTimeout(function () {
	    					connect()
	    				}, reconnInterval)
	    			}

	    			var ping = function () {
	    				var iv = new Date().getTime() - lastInteractionTime();
	    				if ((heartbeatSendInterval + iv) >= heartbeatTimeout) {
	    					let message = {}
	    					message.command  = "heartbeat"
	    					message.data  = {}
	    					window.socket.send(JSON.stringify(message));
	    				}
	    			};
	    			
	    		} else {
	    			alert("你的浏览器不支持 WebSocket！");
	    		}
	    
	    
		function send(message) {
			if (!window.WebSocket) {
				return;
			}
			if (window.socket.readyState == WebSocket.OPEN) {
				let message = {
				"command" : "noticemessage",
				"data":{
				"userName":"10000",
				"groupId":"room1"
				}
				}
				window.socket.send(JSON.stringify(message));
			} else {
				alert("连接没有开启.");
			}
		};
		
		function conn (){
			$.ajax({
		        url: 'http://127.0.0.1:8080/user/login?username=zhz001&password=123456',
		        type: "GET",
		        xhrFields: {
		           withCredentials: true //允许跨域认证
		        },
		        success: function (data) {
		           // console.error(data.data.token)
		            window.token = data.data.token
		            connect(window.token)
		        },
		        error: function (data) {
		            console.error(data)
		        }
		    })
		}
		
	</script>
	<form onsubmit="return false;">
		<textarea id="responseText" style="width: 280px; height: 398px;"></textarea><br>
		<input type="text" name="message"  style="width: 280px" value=""><br>
		<input type="button" value="connect" onclick="conn()">
		<input type="button" value="ok" onclick="send(this.form.message.value)">
		<input type="button" onclick="javascript:document.getElementById('responseText').value=''" value="clear">
	</form>
</body>
</html>